import React, { useEffect, useMemo, useRef } from "react";
import { ResourceList } from "../../Component/ResourceList";
import { Button, Tag } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { FormattedMessage } from "react-intl";
import { LibAppView } from "@/lib";
import dayjs from 'dayjs';
import { useDelete } from "../../hooks/useDelete";
import { AdminRight } from "@/pages/Admin/data/AdminPageAuth";
import ResourceStatus from "../../Component/ResourceStatus";
import { useExpertReview } from "../../Layout/Review/useExpertReview";

const SpecialList = LibAppView.withService()((props) => {
    const microApp = LibAppView.useMicroApp();
    const expertReview = useExpertReview();
    const listRef = useRef<any>();
    const deleteAction = useDelete({
        endPoint: "resource.specialListSubmit",
        cancelEndPoint: "resource.specialListSubmit",
        data: {},
        listRef
    });

    const searchFields = useMemo<Admin.IAdvancedField[]>(() => ([
        { label: "名称", name: "name", type: "Input" }
    ]), []);
    const columns = useMemo(() => ([{
        title: "专家分类",
        dataIndex: "categoryTitle",
        width: 100
    },{
        title: "姓名",
        dataIndex: "name",
        width: 100,
        render: (title: string, data: any) => {
            return (<Button type="link" style={{whiteSpace: "normal", textAlign: "left"}} onClick={() => expertReview.show(data.id)}>{title}</Button>);
        }
    }, {
        title: "性别",
        dataIndex: "gender",
        width: 60,
        render: (v: string) => {
            return v === "male" ? '男' : '女'
        }
    },{
        title: "工作单位",
        dataIndex: "company"
    }, {
        title: "岗位职称",
        dataIndex: "ocupation",
    },{
        title: "审核拒绝原因",
        dataIndex: "approveMsg",
        width: 200,
    },{
        title: <FormattedMessage id="admin.pages.menus.edit.status"/>,
        dataIndex: "status",
        width: 100,
        render: (status: number) => {
            return (<ResourceStatus status={status} />);
        }
    },{
        title: "创建用户",
        dataIndex: "createUserName",
        width: 120
    },{
        title: "创建时间",
        dataIndex: "createDateTime",
        width: 160
    },{
        title: <FormattedMessage id="admin.pages.operate.edit" />,
        dataIndex: "name",
        width: 140,
        render: (name: string, data: any) => {
            const nextProps = {
                ...(data.status != 0 ? { disabled: true } : {}),
                dataId: data.id
            };
            const cancelProps = data.status == 0 ? { disabled: true } : {};
            return (<>
                <AdminRight authRight="editable" mode="disabled" nextProps={nextProps}>
                    <Button size="small" onClick={()=>{
                        microApp.startJourney("editSpecialInfo", {
                            state: {
                                ...data,
                                birth: data.birth ? dayjs(data.birth).format("YYYY-MM") : undefined
                            }
                        });
                    }}>
                        <FormattedMessage id="admin.pages.operate.edit"/>
                    </Button>
                </AdminRight>
                <AdminRight authRight="editable" mode="disabled" nextProps={cancelProps}>
                    <Button size="small" onClick={()=>{
                        deleteAction.cancel({
                            ...data,
                            status: 0,
                            approveMsg: ""
                        })
                    }}>
                        <FormattedMessage id="admin.pages.operate.cancel"/>
                    </Button>
                </AdminRight>
                <AdminRight authRight="deleteable" mode="disabled" nextProps={nextProps}>
                    <Button size="small" onClick={() => {
                        deleteAction.delete({
                            ...data,
                            status: -1,
                            approveMsg: ""
                        });
                    }}><FormattedMessage id="admin.pages.operate.delete"/></Button>
                </AdminRight>
            </>);
        }
    }]), []);
    const listEndPoint = useMemo(() => ({
        endPoint: 'resource.speciallList'
    }), []);
    useEffect(() => {
        microApp.registeJourney({
            name: "editSpecialInfo",
            title: "test journey",
            stepJourney: true,
            isTempJourney: true,
            steps: [{
                isMemoryPage: true,
                page: "admin.resourceSpecialEdit"
            }]
        });
    }, []);
    return <><ResourceList
            refApi={listRef}
            searchFields={searchFields}
            tableColumns={columns}
            listEndPoint={listEndPoint}
            tableWidth={900}
            Operators={() => {
                return (<AdminRight authRight="editable" mode="disabled">
                    <Button type="primary" onClick={() => {
                        microApp.startJourney("editSpecialInfo");
                    }}>
                        <PlusOutlined />
                        <span><FormattedMessage id="admin.pages.operate.add" /></span>
                    </Button>
                </AdminRight>);
            }}
        />
        {expertReview.Provider}
    </>
});

export default SpecialList;
